<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>在线缴费</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/public.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        .center{
            margin-top:71px;
        }
        .fangchan{
            width: 90%;
            margin-left:5%;
            height:43px;
            box-shadow:1px 1px 10px rgba(253,135,67,0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
        }
        .fangchan>span{
            float: left;
            margin-left: 3px;
            color: #FD8340;
            font-size: 16px;
            line-height: 43px;
        }
        .fangchan>select{
            width:73%;
            float: right;
            height:27px;
            border: none;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance:none;
            border: 1px solid #ccc;
            margin-top:10px;
            border-radius: 10px;
            text-indent: 16px;
            font-size: 14px;
            color: #999999;
            background: url("assets/i/xia.png")no-repeat;
            background-position: 95%;
            background-size: 15px;
        }
        .info{
            margin-top:20px;
            width: 90%;
            margin-left: 5%;
            box-shadow:1px 1px 10px rgba(253,135,67,0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            text-align: center;
            padding: 12px;
        }
        .info>p{
            margin: 0;
            padding: 0;
            margin-top:12px;
            font-size: 16px;
            color:#FD8340 ;
            float: left;

        }
        .info>textarea{
            width: 87%;
            clear: both;
            margin-top: 10px;
            height:100px;
            border: 1px solid #DBDBDB;
            border-radius: 10px;
            outline:none;
            resize: none;
            text-indent: 12px;
        }
        .btn{
            margin-top: 80px;
        }
        .btn>span{
            width:48%;
            display: block;
            margin-left: 26%;
            height:45px;
            background: linear-gradient(to bottom, #FD8340 , #FD9F52);
            border-radius: 15px;
            color: #fff;
            font-size:15px;
            line-height: 45px;
            text-align: center;
        }
        .free-item{
            margin-top:12px;
        }
        .free-item span{
            float: left;
            font-size: 14px;
            color: #333;
            line-height: 25px;
        }
        .free-item label{
            float: right;
        }
        .free-item:first-child{
            margin-top:22px;
        }
        input[type="checkbox"] {
            margin: 5px 5px 0px 5px;
            display: none;
        }

        .free-item label {
            cursor: pointer;
            padding-left: 24px;
            height:20px;
            background-size: 15px;
            background: url("assets/i/xuanze.png")no-repeat;
            background-size: 14px;
            font-weight: normal;
            color: #333;
        }
        .checked {
            cursor: pointer;
            padding-left: 24px;
            background: url("assets/i/xuanze1.png")no-repeat !important;
            background-size: 15px !important;
            color: #333;

        }
        .all-price{
            width: 90%;
            margin-left:5%;
            height:43px;
            box-shadow:1px 1px 10px rgba(253,135,67,0.22);
            -webkit-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            -moz-box-shadow: 1px 1px 10px rgba(253,135,67,0.22);
            margin-top:20px;
        }
        .all-price span{
            line-height:43px ;
            font-size:16px ;
            color: #FD8340;
            letter-spacing: 2px;
        }
    </style>

</head>
<body>
<div class="top am-g" style="opacity: 1;">
    <div class=" am-u-sm-12 am-text-center">
        <a href="index.html">
        <img src="assets/i/zuo.png" width="8" >
    </a>
        <span class="center-title">在线缴费</span>
    </div>
</div>
<div class="am-g center"  style="margin-top: 71px;">
    <div class="am-u-sm-12 fangchan">
        <span>房产选择</span>
        <select name="add" id="sel">
            <!--<option value="a">请选择你的房产</option>-->
        </select>
    </div>
    <div style="clear:both;"></div>
    <div class="am-u-sm-12 info">
        <p>未缴情况：</p>
        <div class="am-u-sm-12 am-padding-0 free-item proper_item">
            <span>物业费：</span><span id="proper_box" class="totle">0</span><span>元</span>
            <input type="checkbox" name="free" id="wuye" value="wuye" class="oeach">
            <label for="wuye" class="choose wuyefei"></label>
        </div>
        <div class="am-u-sm-12 am-padding-0 free-item water_item">
            <span>水费：</span><span id="water_box" class="totle">0</span><span>元</span>
            <input type="checkbox" name="free" id="shui" value="shui" class="oeach">
            <label for="shui" class="choose shuifei"></label>
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="am-u-sm-12 all-price">
        <span>总计费用：</span><span id="all_tol">0</span><span>元</span>
    </div>
    <div style="clear: both"></div>
    <div class="am-u-sm-12 btn">
        <span class="zhifubtn" >立即支付</span>
    </div>
</div>
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-2" >
    <div class="am-modal-dialog" style="border-radius: 10px;">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="" style="background: url('assets/i/down.png') no-repeat;height: 30px;width: 30px;display: block;background-size: 15px;float: right" data-am-modal-close></a>
        </div>
        <div class="am-modal-bd" style="margin-top: 44px;font-size: 16px;color: #333;font-weight: bold" >
            请输入房产信息！
        </div>
    </div>
</div>

</body>
<script src="assets/js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/global.js"></script>
<script>
    $(function(){
        $('.choose').click(function(){
            if ($(this).hasClass("checked")) {
                $(this).removeClass("checked");
                $(this).prev().css("checked","false");
            }else{
                $(this).addClass("checked");
                console.log($(this));
                $(this).prev().css("checked","true");
            }
        })
    });
</script>
<script>
    var list_data = '';
    var house_id = -1 ;
    var house_property_id = getQueryString('house_property_id');
    console.log(house_property_id);
    // var free='';
    $(function () {
        initGlobalPage();
        var token = sessionStorage.access_token;
        $("#sel").empty();
        $.ajax({
            method:"POST",
            data:{
                token:token
            },
            url:"/index/user/ajax_get_house_property",
            dataType:"json",
            async:false,
            success:function (result) {
                console.log(result);
                if (result.code == -1) {
                    initGlobalPage();
                    return;
                }
                if (result.code==1){
                    console.log(result);
                    list_data = result.data;
                    startSelectChange();

                }
                if(result.code == 3){
                    $('#doc-modal-2').modal('open');
                    $('#doc-modal-2').on('opened.modal.amui', function(){
                        sleep(1000);
                        window.history.back(-1);
                    });
                }
            },
            error:function () {
                console.log("error");
            }
        });
    });
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
    function startSelectChange() {
        console.info(list_data);
        var html_sel ='';
         html_sel = "<option value='-1'>--请选择你的房产--</option>";
        $(list_data).each(function (index,value) {
           console.log(value);
           if(value.charge_total!=0.00){
               var isId = '';
               if(value.id == house_property_id){
                   isId = 'selected';
                   $("#proper_box").html(value.property_charge);
                   $("#water_box").html(value.water_charge);
                   house_id =  index;
                   $(".oeach").click(function(){
                       var shui = $(".shuifei").hasClass("checked");
                       var wuye = $(".wuyefei").hasClass("checked");
                       var a = value;
                       console.log(a);
                       if(wuye && shui){
                           var c= parseFloat(a.property_charge)+parseFloat(a.water_charge);
                           $("#all_tol").text(c);
                       }else if(!wuye && shui){
                           var c =  parseFloat(a.water_charge);
                           $("#all_tol").text(c);
                       }else if(wuye && !shui){
                           var c=parseFloat(a.property_charge);
                           $("#all_tol").text(c);
                       }else if(!wuye && !shui){
                           $("#all_tol").text(0);
                       }
                   });
               }
               html_sel += '<option value="'+index+'" '+isId+' class="fenlei" id="'+value.id+'">'+value.detail+'</option>';
           }
        });
        $("#sel").append(html_sel);
        $('#sel').change(function (e){
            $('label').removeClass('checked');
            $(".totle").empty();
            var value = $(this).val();
            console.info(list_data[value]);
            console.info(value);
            house_id =value;
            $("#all_tol").text(0);
            if(value!= -1){
                $("#proper_box").append(list_data[value].property_charge);
                $("#water_box").append(list_data[value].water_charge);
                if(list_data[value].water_charge == 0){
                    $("#water_item").hide();
                }else{
                    $("#water_item").show();
                }
                if(list_data[value].property_charge == 0){
                    $("#proper_item").hide();
                }else{
                    $("#proper_item").show();
                }
                $(".oeach").click(function(){
                    var shui = $(".shuifei").hasClass("checked");
                    var wuye = $(".wuyefei").hasClass("checked");
                    var a = list_data[value];
                    console.log(a);
                    if(wuye && shui){
                        var c= parseFloat(a.property_charge)+parseFloat(a.water_charge);
                        $("#all_tol").text(c);
                    }else if(!wuye && shui){
                        var c =  parseFloat(a.water_charge);
                        $("#all_tol").text(c);
                    }else if(wuye && !shui){
                        var c=parseFloat(a.property_charge);
                        $("#all_tol").text(c);
                    }else if(!wuye && !shui){
                        $("#all_tol").text(0);
                    }
                });
            }else{
                $("#proper_box").append(0);
                $("#water_box").append(0);
                $(".oeach").click(function(){
                    $("#all_tol").text(0);
                });
            }
        })
    }
    $(function () {
        initGlobalPage();
        var token = sessionStorage.access_token;
           $(".zhifubtn").click(function () {
               var free=($("#all_tol").text());
               console.log(house_id);
               if(house_id==-1){
                   console.log(house_id);
                   layer.msg('请选择您的房产');
                   return;
               }
            var data = {
                token: token,
                house_property_id: list_data[house_id].id,
                property_charge: list_data[house_id].property_charge,
                water_charge: list_data[house_id].water_charge,
                total_money: free
            };
               console.log(data);
               var shui = $(".shuifei").hasClass("checked");
               var wuye = $(".wuyefei").hasClass("checked");
               var a = list_data[house_id];
               console.log(a);
               if(!wuye && shui){
                   data.property_charge = 0;
               }else if(wuye && !shui){
                   data.water_charge = 0;
               }else if(!wuye && !shui){
                   data.property_charge = 0;
                   data.water_charge = 0;
                   layer.msg('请选择您的费用');
                   return;
               }
            console.log(data);
            $.ajax({
                method: "POST",
                data: data,
                url: "/index/pay/ajax_payment",
                dataType: "json",
                async: false,
                success: function (result) {
                    console.log(result);
                    if (result.code == -1) {
                        layer.msg(result.msg);
                        return;
                    }
                    if (result.code == 1) {
                        jsApiParameters = result.data.jsApiParameters;
                        jsApiParameters = JSON.parse(jsApiParameters);
                        docallpay();
                        $(".zhifubtn").unbind('click');
                        window.location.href= 'index.html';
                    }
                },
                error: function () {
                    console.log("error");
                }
            });
           });
        //调用微信JS api 支付
        function jsApiCall()
        {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                    "appId": jsApiParameters.appId,
                    "nonceStr":jsApiParameters.nonceStr,
                    "package": jsApiParameters.package,
                    "paySign":jsApiParameters.paySign,
                    "signType": jsApiParameters.signType,
                    "timeStamp": jsApiParameters.timeStamp
                },
                function(res){
                    WeixinJSBridge.log(res.err_msg);
    //                    alert(res.err_code+res.err_desc+res.err_msg);
    //                 console.info(res.return_code);
                    if(res.err_msg == "get_brand_wcpay_request:ok"){
                        // window.location.href= '/pages/answer.html?id='+red_envelope_id;
                    }else{
                        flag = true;
                    }
                }
            );
        }
        function docallpay()
        {
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                    document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
                }
            }else{
                jsApiCall();
            }
        }
    });
</script>
</html>